{% extends 'base_temp.html' %} {% load static %}
{% block title %}进程列表{% endblock %}

{% block page_css_js_plugin %}
    <script src="{% static 'js/sweetalert.min.js' %}"></script>
    <script src="{% static 'js/intercooler-1.2.1.min.js' %}"></script>
{% endblock %}

{% block content %}
    <div class="row row-cards-pf">  <!-- row -->
        <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->

        <!-- ============================================================== -->
        <!-- 面包屑 start -->
        <!-- ============================================================== -->
        <ol class="breadcrumb">
            <li><a href="{% url 'index' %}"><i class="fa fa-dashboard"> </i> 主页</a></li>
            <li>进程列表</li>
        </ol>
        <!-- ============================================================== -->
        <!-- 面包屑 end -->
        <!-- ============================================================== -->

        <!-- ============================================================== -->
        <!-- 信息概要 start -->
        <!-- ============================================================== -->
        <div class="row ">
            <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
            <div class="col-lg-offset-1 col-md-offset-1 col-xs-12 col-sm-6 col-md-3 ">
                <div class="has_shadow card-pf card-pf-accented card-pf-aggregate-status" style="height: 89px;">
                    <h2 class="card-pf-title" style="height: 17px;">
                        <span class="pficon pficon-cluster"></span><span
                            class="card-pf-aggregate-status-count"><strong>{{ host_count }}</strong></span>
                        主机
                    </h2>
                    <div class="card-pf-body" style="height: 50px;">
                        <p class="has_shadow card-pf-aggregate-status-notifications">
                            <span class="card-pf-aggregate-status-notification">
                                <a href="{% url 'supervisor_addhost' %}" class="add" data-toggle="tooltip"
                                   data-placement="top" title="" data-original-title="Add Ipsum"><span
                                        class="pficon pficon-add-circle-o">

                                </span>
                                </a></span>
                        </p>
                    </div>
                </div>

            </div>

            <div class="col-xs-12 col-sm-6 col-md-3">
                <div class="has_shadow card-pf card-pf-accented card-pf-aggregate-status" style="height: 89px;">
                    <h2 class="card-pf-title" style="height: 17px;">
                        <span class="pficon pficon-process-automation"></span><span
                            class="card-pf-aggregate-status-count"><strong>{{ process_count }}</strong></span> 进程
                    </h2>
                    <div class="card-pf-body" style="height: 50px;">
                        <p class="card-pf-aggregate-status-notifications">
                            <span class="card-pf-aggregate-status-notification"><a href="#"><span
                                    class="pficon pficon-error-circle-o"></span>4</a></span>
                            <span class="card-pf-aggregate-status-notification"><span class="pficon  pficon-ok"></span>1</span>
                        </p>
                    </div>
                </div>

            </div>

            <div class="col-xs-12 col-sm-6 col-md-3">
                <div class="has_shadow card-pf card-pf-accented card-pf-aggregate-status" style="height: 89px;">
                    <h2 class="card-pf-title" style="height: 17px;">
                        <a href="#"><span class="fa fa-shield"></span><span
                                class="card-pf-aggregate-status-count">9</span> 标签</a>
                    </h2>
                    <div class="card-pf-body" style="height: 50px;">
                        <p class="card-pf-aggregate-status-notifications">
                            <span class="card-pf-aggregate-status-notification"><span
                                    class="pficon pficon-degraded"></span></span>
                        </p>
                    </div>
                </div>

            </div>

        </div>
        <!-- ============================================================== -->
        <!-- 信息概要 end -->
        <!-- ============================================================== -->

        <!-- ============================================================== -->
        <!-- 搜索、刷新 start -->
        <!-- ============================================================== -->
        <div class="row ">
            <!-- 刷新 start -->
            <div class="col-lg-offset-1 col-md-offset-1 col-md-3">
                <button class="btn btn-info refresh_allhost_allprocess">刷新所有进程</button>
            </div>
            <!-- 刷新 end -->

            <!-- 搜索 start -->
            <div class="col-md-3">

                <form role="form" class="search-pf has-button">
                    <div class="form-group has-clear">
                        <div class="search-pf-input-group">
                            <label for="search6" class="sr-only">搜索</label>
                            <input id="search6" type="text" class="form-control" placeholder="搜索进程" name="q"
                                    {% if q %}  value="{{ q }}"  {% endif %}>
                            <button type="submit" class="clear" aria-hidden="true"><span
                                    class="pficon pficon-close"></span></button>
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-default" type="submit"><span class="fa fa-search"></span></button>

                    </div>
                </form>


            </div>
            <!-- 搜索 end -->
        </div>
        <!-- ============================================================== -->
        <!-- 搜索、刷新 end -->
        <!-- ============================================================== -->

        <hr style="margin: 1rem 0">

        <!-- ============================================================== -->
        <!-- 进程列表、历史 start -->
        <!-- ============================================================== -->
        <div class="row ">

            <!-- 进程列表 start -->
            {% if q %}
                {% include 'supervisor_dj/snippets/__process_list.html'  with processes_list=processes_list %}
            {% else %}
                {% include 'supervisor_dj/snippets/__process_host_list.html' with process_host_list=process_host_list %}
            {% endif %}
            <!-- 进程列表 end -->

            <!-- 操作历史 start -->
            <div class="col-md-4">  {# 执行历史 #}
                <div class="panel panel-default has_shadow">
                    <div class="panel-heading">
                        <h3 class="panel-title">最近操作</h3>
                    </div>
                    <div class="panel-body">
                        {% for action_h in action_histtory %}
                            <p> {{ forloop.counter }}. {{ action_h.add_time }} - {{ action_h.user }}
                                <span class="label label-default">{{ action_h.action_name }}</span>
                                {{ action_h.ip }} {{ action_h.process_name }} {% if action_h.status %}
                                    <span class="label label-success">执行成功</span>
                                {% else %}
                                    <span class="label label-danger">执行失败</span>
                                {% endif %}
                            </p>
                            <hr>
                        {% endfor %}


                    </div>
                </div>
            </div>
            <!-- 操作历史 end -->
        </div>
        <!-- ============================================================== -->
        <!-- 进程列表、历史 end -->
        <!-- ============================================================== -->
    </div>


{% endblock %}

{% block page_javascript %}
    <script type="application/javascript">

        $(function () {
            // 停止
            $('button.stop').click(function () {
              
                let parent_obj = $(this).parent();
                let process_name = parent_obj.siblings()[0].innerText;
                let process_atatus = parent_obj.siblings()[1].innerText;
                let ip = parent_obj.attr("ip");
                let action = 'stop';
                let url = `{% url 'supervisor_stop' %}?ip=${ip}&process_name=${process_name}&action=${action}`;

                swal(`确定要停止${ip} --- ${process_name} 进程?`, {
                    buttons: {
                        确认: true,
                        cancel: "取消",
                    },
                })
                    .then((value) => {
                        switch (value) {
                            case "确认"  :
                                $.get(url, function (data) {
                                    let msg = data.msg;
                                    let status_code = data.status_code;
                                    if (status_code === true) {
                                        swal("停止成功", msg, "success");
                                        setTimeout(function () {
                                            window.location.reload()
                                        }, 2000)
                                    } else if (status_code === false) {
                                        swal("停止失败", msg, "error");
                                    }

                                }).fail(function (data) {
                                    swal("停止失败", "服务器内部错误", "error");
                                })
                        }
                    });
            });

            // 启动
            $("button.start").click(function () {
                let parent_obj = $(this).parent();
                let process_name = parent_obj.siblings()[0].innerText;
                let process_atatus = parent_obj.siblings()[1].innerText;
                let ip = parent_obj.attr("ip");
                let action = 'start';
                let url = `{% url 'supervisor_start' %}?ip=${ip}&process_name=${process_name}&action=${action}`;
                swal(`确定要启动${ip} --- ${process_name} 进程?`, {
                    buttons: {
                        确认: true,
                        cancel: "取消",
                    },
                })
                    .then((value) => {
                        switch (value) {
                            case "确认"  :
                                $.get(url, function (data) {
                                    let msg = data.msg;
                                    let status_code = data.status_code;

                                    if (status_code === true) {
                                        swal("启动成功", msg, "success");
                                        setTimeout(function () {
                                            window.location.reload()
                                        }, 2000)

                                    } else if (status_code === false) {
                                        swal("启动失败", msg, "error");
                                    }

                                }).fail(function (data) {
                                    swal("启动失败", "服务器内部错误", "error");
                                })
                        }
                    });
            });

            // 重启
            $("button.restart").click(function () {
                let parent_obj = $(this).parent();
                let process_name = parent_obj.siblings()[0].innerText;
                let process_atatus = parent_obj.siblings()[1].innerText;
                let ip = parent_obj.attr("ip");
                let url = `{% url 'supervisor_restart' %}?ip=${ip}&process_name=${process_name}`;

                swal(`确定要停止${ip} --- ${process_name} 进程?`, {
                    buttons: {
                        确认: true,
                        cancel: "取消",
                    },
                })
                    .then((value) => {
                        switch (value) {
                            case "确认":

                                $.get(url, function (data) {
                                    let msg = data.msg;
                                    let status_code = data.status_code;
                                    if (status_code === true) {
                                        swal("重启成功", msg, "success", {
                                            buttons: false,
                                            timer: 2000,
                                        }).then(
                                            () => {
                                                window.location.reload()
                                            }
                                        );
                                    } else if (status_code === false) {
                                        swal("重启失败", msg, "error");
                                    }


                                }).fail(function (data) {
                                    alert("错误")
                                });
                                break;
                            case "cancel":
                                break;
                            default:
                                break
                        }
                    });
            });

            // 详情
            $("button.detail").click(function () {
                let parent_obj = $(this).parent();
                let process_name = parent_obj.siblings()[0].innerText;
                let ip = parent_obj.attr("ip");
                let url = `{% url 'supervisor_detail' %}?ip=${ip}&process_name=${process_name}`;
                $.get(url, function (data) {

                    data_ = JSON.stringify(data, null, 2);
                    swal(`${ip} --- ${process_name} 进程详情`, data_)
                }).fail(function () {
                    swal("服务器内部错误");
                })
            });

            //  刷新
            $("button.refresh").click(function () {

                let ip = $(this).parent().attr("ip");
                let url = `{% url 'supervisor_refreshhost' %}?ip=${ip}`;
                $.get(url, function (data) {
                    let msg = data.msg;
                    let status_code = data.status_code;
                    if (status_code === true) {
                        window.location.reload()
                    } else if (status_code === false) {
                        swal("刷新失败", msg, "error");
                    }


                }).fail(function () {
                    swal("服务器内部错误");
                })
            });

            // 刷新所有
            $("button.refresh_allhost_allprocess").click(function () {
                let url = `{% url 'supervisor_refresh_allhost_allprocess' %}`;
                $.get(url, function (data) {
                    let msg = data.msg;
                    let status_code = data.status_code;
                    if (status_code === true) {
                        window.location.reload()
                    } else if (status_code === false) {
                        swal("刷新失败", msg, "error");
                    }


                }).fail(function () {
                    swal("服务器内部错误");
                })
            });
        });


        // new
        $(function () {
            $("button.doaction_btn").click(function () {


                let parent_obj = $(this).parent();
                let process_name = parent_obj.siblings()[0].innerText;
                let process_atatus = parent_obj.siblings()[1].innerText;
                let ip = parent_obj.attr("ip");
                let doaction = $(this).attr("doaction");
                let url = `{% url 'supervisor_stop' %}?ip=${ip}&process_name=${process_name}&action=${doaction}`;


            })
        });

        // 搜索按钮触发框
        (function ($) {
            $(document).ready(function () {
                let clear_btn = $(".search-pf .has-clear .clear");

                // 如果搜索框为空则隐藏关闭按钮
                clear_btn.each(function () {
                    if (!$(this).prev('.form-control').val()) {
                        $(this).hide();
                    }
                });
                // 如果搜索框中输入文字则触发显示关闭按钮
                $(".search-pf .has-clear .form-control").keyup(function () {
                    let t = $(this);
                    t.next('button').toggle(Boolean(t.val()));
                });
                // 点击关闭按钮后，触发清空内容，且隐藏关闭按钮 ,输入框获得聚焦状态（focus）
                clear_btn.click(function () {
                    $(this).prev('.form-control').val('').focus();
                    $(this).hide();
                });
            });
        })(jQuery);

    </script>
{% endblock %}